<sidebar></sidebar>

<div id="page-content" ng-style="{ 'marginLeft': rootFields.marginSidebar}">
  <topbar></topbar>
  
  <breadcrumb></breadcrumb>

  <messages></messages>
  
  <div class="fadein" ng-show="rootFields.showContent">
    <div id="page-title" class="clearfix">
      <h1 class="pull-left">Space: {{name}}</h1>
      <div class="pull-right">
        <a class="action action-edit" ng-click="editSpace(id)" title="Edit"><i class="fa fa-lg fa-pencil"></i></a>
        <a class="action action-delete" ng-click="deleteSpace(id)" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
      </div>
    </div><!-- /#page-title -->
    
    <div id="page-content-wrap" class="clearfix">
      
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title">Applications <span class="label label-default">{{nrOfApplications}}</span></h3>
              <a class="btn btn-success pull-right" ng-click="addApplication()" ng-show='false'><i class="fa fa-plus"></i>&nbsp; Add an application</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Status</th>
                  <th>Application</th>
                  <th>Instances</th>
                  <th>Memory</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="application in applications" ng-click="showApp(application.id, $event)" style="cursor: pointer">
                  <td>
                    <span class="label" ng-class="application.status == 'running' ? 'label-success' : application.status == 'crashed' ? 'label-danger' : 'label-default'">{{application.status}}</span>
                  </td>
                  <td>
                    {{application.name}}<br>
                    <a ng-href="http://{{application.url}}" target="_blank">{{application.url}}</a>
                  </td>
                  <td>{{application.instances}}</td>
                  <td>{{application.memory}} MB</td>
                  <td>
                    <a class="action" href="#/organizations/{{organizationId}}/spaces/{{spaceId}}/applications/{{application.id}}" title="Details"><i class="fa fa-lg fa-eye"></i></a>
                    <a class="action action-edit" ng-click="editApplication(application); $event.stopPropagation();" title="Edit"><i class="fa fa-lg fa-pencil"></i></a>
                    <a class="action action-delete" ng-click="deleteApplication(application.id); $event.stopPropagation();" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
  
        <div class="col-sm-12 col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Services <span class="label label-default">{{nrOfServices}}</span></h3>
              <a href="#/organizations/{{organizationId}}/spaces/{{spaceId}}/marketplace" class="btn btn-success pull-right"><i class="fa fa-plus"></i>&nbsp; Add a service</a>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Service plan</th>
                  <th>Bound services</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="service in services">
                  <td>{{service.name}}</td>
                  <td>{{service.servicePlan}}</td>
                  <td>{{service.nrOfBoundApps}}</td>
                  <td>
                    <a class="action" href="{{service.supportURL}}" target="_blank" title="Support"><i class="fa fa-lg fa fa-question"></i></a>
                    <a class="action" href="{{service.docsURL}}" target="_blank" title="Docs"><i class="fa fa-lg fa fa-file"></i></a>
                    <a class="action" href="{{service.dashboardUrl}}" target="_blank" title="Manage"><i class="fa fa-lg fa fa-cog"></i></a>
                    <a class="action action-delete" ng-click="deleteServiceInstance(service)" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>

        <div class="col-sm-12 col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Routes <span class="label label-default">{{nrOfRoutes}}</span></h3>
              <div class="pull-right">
              <a class="btn btn-success" ng-click="deleteOrphanedRoutes(routes)" ng-show="showOrphanRoute"><i class="fa fa-plus"></i>&nbsp; Delete orphaned routes</a>&nbsp;
              <a class="btn btn-success" ng-click="addRoute()"><i class="fa fa-plus"></i>&nbsp; Add a route</a>
              </div>
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions">
              <thead>
                <tr>
                  <th>Route</th>
                  <th>App</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="route in routes">
                  <td>{{route.name}}</td>
                  <td>
                    <div ng-repeat="app in route.apps">{{app.name}}<br></div>
                  </td>
                  <td>
                    <a class="action action-map" ng-click="associateRouteWithApp(route, applications)" title="Map" ng-show="nrOfApplications>0"><i class="fa fa-lg fa-link"></i></a>
                    <a class="action action-map" ng-click="disassociateRouteWithApp(route)" title="Unmap" ng-show="route.apps.length>0"><i class="fa fa-lg fa-unlink"></i></a><i class="fa fa-fw" ng-hide="route.apps.length>0"></i>
                    <a class="action action-delete" ng-click="deleteRoute(route)" title="Delete"><i class="fa fa-lg fa-trash"></i></a>
                  </td>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>

        <div class="col-sm-12 col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <h3 class="panel-title pull-left">Users <span class="label label-default">{{nrOfSpaceUsers}}</span></h3>
              <a ng-click="addUser()" class="btn btn-success pull-right"><i class="fa fa-plus"></i>&nbsp; Add a user</a>
                    
            </div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions" ng-show="currentUser.currentManager">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Space Manager</th>
                  <th>Space Auditor</th>
                  <th>Space Developer</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="user in users | orderBy:name:false">
                  <td>{{user.name}}</td>
                  <td>
                    <a class="action action-add" ng-click="deleteManager(user.id)"><i class="fa fa-lg fa-check-square-o" ng-show="user.spaceManager && !user.currentUser"></i></a>
                    <a class="action action-delete" ng-click="addManager(user.name)"><i class="fa fa-lg fa-square-o" ng-show="!user.spaceManager && 
                    !user.currentUser"></i></a>
                    &nbsp;<i class="fa fa-lg fa-check" ng-show="user.currentUser"></i>
                  </td>
                  <td>
                    <a class="action action-add" ng-click="deleteAuditor(user.id)"><i class="fa fa-lg fa-check-square-o" ng-show="user.spaceAuditor"></i></a>
                    <a class="action action-delete" ng-click="addAuditor(user.name)"><i class="fa fa-lg fa-square-o" ng-hide="user.spaceAuditor"></i></a>
                  </td>
                  <td>
                    <a class="action action-add" ng-click="deleteDeveloper(user.id)"><i class="fa fa-lg fa-check-square-o"ng-show="user.spaceDeveloper && !user.currentUser"></i></a>
                    <a class="action action-delete" ng-click="addDeveloper(user.name)"><i class="fa fa-lg fa-square-o" ng-show="!user.spaceDeveloper && 
                    !user.currentUser"></i></a>
                    <a class="action action-delete"><i class="fa fa-lg fa-close" ng-show="!user.spaceDeveloper && 
                    user.currentUser"></i></a>
                    &nbsp;<i class="fa fa-lg fa-check" ng-show="user.spaceDeveloper && user.currentUser"></i>
                  </td>
                  <td>
                    <a class="action action-delete" ng-click="deleteUser(user)"><i class="fa fa-lg fa-trash" ng-hide="user.currentUser"></i></a>&nbsp;&nbsp;
                  </td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table></div>
            <div  class="table-responsive"><table class="table table-striped table-hover has-actions" ng-show="!currentUser.currentManager">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Space Manager</th>
                  <th>Space Auditor</th>
                  <th>Space Developer</th>
                  <th>&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="user in users | orderBy:name:false">
                  <td>{{user.name}}</td>
                  <td>
                    <i class="fa fa-lg fa-check" ng-show="user.spaceManager"></i>
                    <i class="fa fa-lg fa-close" ng-show="!user.spaceManager"></i>
                  </td>
                  <td>
                    <i class="fa fa-lg fa-check" ng-show="user.spaceAuditor"></i>
                    <i class="fa fa-lg fa-close" ng-hide="user.spaceAuditor"></i>
                  </td>
                  <td>
                    <i class="fa fa-lg fa-check" ng-show="user.spaceDeveloper"></i>
                    <i class="fa fa-lg fa-close" ng-hide="user.spaceDeveloper"></i>
                  </td>
                  <td>
                    &nbsp;
                  </td>
                  </div>
                </tr>
              </tbody>
            </table></div>
          </div><!-- /.panel -->
        </div>
  
      </div><!-- /.row -->
      
    </div><!-- /#page-content-wrap -->
  </div>
</div><!-- /#page-content -->